<script setup lang="ts">
import { onMounted } from 'vue'
import { useRequest } from '@/utils/hooks'
import { handleApi } from '@/utils/alert'
import { message, Modal, TableColumnType } from 'ant-design-vue'
import { cancelUserWaybill, getUserWaybill, getWaybillAuthUri, updateWaybillAccount } from "@/api/waybill.ts";
import WaybillAddress from "#/supporter-waybill/waybill-address.vue";

const { dataSource, fetch, loading } = useRequest(getUserWaybill, handleApi)

const columns: (TableColumnType & DataIndex<IUserWaybill>)[] = [
  { key: 'account', title: '账号', className: 'align-top', width: '20%' },
  { key: 'child', title: '网点', width: '80%' }
]

const childColumns: (TableColumnType & DataIndex<IUserWaybillChild>)[] = [
  { key: 'branch', dataIndex: 'branch_name', title: '网点名称', width: '20%' },
  { key: 'addr', title: '发货地址', width: '40%' },
  { key: 'quantity', title: '账号信息', width: '40%' }
]

onMounted(() => {
  fetch()
})

const getAccountCell = (record: IUserWaybillChild) => {
  return `可用单数: ${record.quantity}, 已用单数: ${record.allocated_quantity}, 回收单数: ${record.recycled_quantity} `
}

const getRow = (row: IUserWaybill) => row

const onCancelConfirm = async (id: number) => {
  loading.value = true
  const res = await cancelUserWaybill(id).catch(handleApi)
  if (res?.code === 1) {
    message.success('取消授权成功')
    await fetch()
  }
  loading.value = false
}

const getAuthUrl = async () => {
  loading.value = true
  const res = await getWaybillAuthUri().catch(handleApi)
  if (res?.code === 1 && res.data) {
    window.open(res.data, '_blank')
    Modal.confirm({
      okText: '确认',
      cancelText: '取消',
      content: '是否授权成功?',
      onOk: () => {
        fetch().finally(() => loading.value = false)
      },
      onCancel: () => loading.value = false
    })
  }
}

const updateAccount = (item: IUserWaybill) => {
  loading.value = true
  updateWaybillAccount(item.acount_id).then(async () => {
    return fetch()
  }).finally(() => loading.value = false)
}

</script>


<template>
  <div class="px-4 py-4">
    <AButton type="primary" @click="getAuthUrl">添加电子面单账号授权</AButton>
  </div>
  <ATable
    :columns="columns"
    :data-source="dataSource"
    :loading="loading"
    :show-header="false"
    :pagination="false">
    <template #bodyCell="{ column, record }">

      <template v-if="column.key === 'account'">
        <div class="flex flex-col space-y-1 p-4 rounded">
          <span class="text-lg">{{ getRow(record).acount_name }}</span>
          <span>电子面单账号: {{ getRow(record).acount_id }}</span>
          <span>服务到期时间: {{ getRow(record).end_time }}</span>
          <div class="flex space-x-2">
            <AButton type="link" @click="getAuthUrl">重新授权</AButton>
            <APopconfirm
              title="确定要解除绑定吗?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="() => onCancelConfirm(getRow(record).id)"
            >
              <AButton type="link" danger>解除绑定</AButton>
            </APopconfirm>
          </div>

        </div>
      </template>

      <template v-if="column.key === 'child'">
        <div class="space-y-2">
          <template v-for="child of getRow(record).child">
            <div class="border border-solid border-gray-200">
              <div class="w-full p-2">快递: {{ child.express_name }}</div>
              <ATable :columns="childColumns" :data-source="[child]" :pagination="false" size="small">
                <template #bodyCell="{ column, record: bRecord }">
                  <template v-if="column.key === 'addr'">
                    <WaybillAddress :value="bRecord.address"></WaybillAddress>
                  </template>
                  <template v-if="column.key === 'quantity'">
                    <div>
                      <span>{{ getAccountCell(bRecord) }}</span>
                      <AButton type="link" @click="updateAccount(record)">更新</AButton>
                    </div>
                  </template>
                </template>
              </ATable>
            </div>
          </template>
        </div>
      </template>
    </template>
  </ATable>
</template>